<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
</head>
<body style=" background-image: url('/images/book1.jpg');background-size: 100% ">
<div class="layui-container" style="width: 1000px;height: 600px;margin-top: 0px;padding-top: 60px;  ">

    <div style="margin-left: 660px; width: 200px;">
        欢迎回来！<a href="/bookMenu/redirect/reader_borrow" th:text="${session.reader.name}"></a><a href="/account/logout">&nbsp;&nbsp;&nbsp;<button class="layui-btn layui-btn-warm layui-btn-radius">退出</button></a>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="borrow">借阅</a>
    </script>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script>
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test'
                ,url:'/bookMenu/findAll'
                ,title: '图书列表'
                ,cols: [
                    [
                        {field:'id', width:100, title: '图书编号'}
                        ,{field:'name', width:150, title: '图书名称'}
                        ,{field:'author', width:110, title: '作者'}
                        ,{field:'publish', width:200, title: '出版社'}
                        ,{field: 'pages', width: 100, title: '图书页数', sort: true}
                        ,{field: 'price', width: 100, title: '价格', sort: true}
                        ,{field:'bookcaceid',width:100,  title: '分类',templet:function(data){
                            return data.bookcase.name
                        }
                    }
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:100}
                    ]
                ]
                ,page: true
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'borrow'){
                    window.location.href="/borrow/saveBorrow/"+data.id;
                }
            });
        });
    </script>

</div>
<script>
    //二级菜单联动
    layui.use('element', function(){
        var element = layui.element;
    });
</script>
</body>
</html>
